<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { registrationSearchTypeList } from '@/enums/registration.enums';
import { dictVal2Text } from '@/utils/dict.utils';
import { strIsEmpty } from '@/utils/is.utils';

const props = withDefaults(defineProps<{
  options: DictItem[]
  modelValue: string | number
  placeholder?: string
  offset?: number
  customClass?: string
}>(), {
  placeholder: '请选择'
});

const emit = defineEmits<{
  'change': [value: string | number]
  'update:modelValue': [value: string | number]
}>();

const menuList = computed(() => {
  return props.options.map(item => {
    return {
      ...item,
      text: item.label
    };
  });
});

const inputValue = ref(props.modelValue);

const popoverOpen = ref(false);

const inputText = computed(() => {
  if (strIsEmpty(inputValue.value)) {
    return props.placeholder;
  }
  return dictVal2Text(inputValue.value, registrationSearchTypeList.list);
});

function handleMenuClick({ item }: { item: DictItem }) {
  inputValue.value = item.value;
  emit('change', inputValue.value);
  emit('update:modelValue', inputValue.value);
}

watch(
  () => props.modelValue,
  newValue => {
    inputValue.value = newValue;
  }
);
</script>

<template>
  <view class="custom-select" :class="[customClass]">
    <uni-data-select v-model="inputValue" :localdata="menuList" :clear="false" />
  </view>

  <view v-if="false" class="custom-select">
    <wd-popover
      v-model="popoverOpen"
      mode="menu"
      :content="menuList"
      :offset="offset"
      @menuclick="handleMenuClick"
    >
      <view class="custom-input__input">
        <wd-input :placeholder="inputText" readonly />
        <view class="select-arrow" :class="{ open: popoverOpen }">
          <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
        </view>
      </view>
    </wd-popover>
  </view>
</template>

<style lang="scss" scoped>
.custom-select {
  position: relative;
  --wot-input-inner-height: 68px;
  --wot-input-fs: 20px;
  --wot-input-placeholder-color: #767676;

  --wot-tooltip-fs: 26px;
  --wot-tooltip-line-height: 44px;
  --wot-popover-arrow-size: 12px;
  --wot-popover-radius: 8px;
  --wot-popover-color: #767676;

  :deep(.wd-input) {
    border-radius: 8px;
    background: #eff5ff;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    padding-left: 20px;

    &:after {
      background: transparent;
    }
  }

  .select-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;

    &.open {
      transform: translateY(-50%) rotate(180deg);
    }
  }

  :deep(.uni-stat__select) {
    .uni-stat-box {
      background-color: #eff5ff;
      border-radius: 8px;
    }
    .border-default {
      border: 1px solid #ffffff;
    }
    .uni-select {
      min-height: 68px;
    }
    .uni-select__input-placeholder {
      color: #767676;
      font-size: 20px;
    }
    .uni-select__input-text {
      color: var(--text-color);
      font-size: 20px;
    }

    .uni-icons {
      font-size: 24px !important;
      color: var(--primary) !important;
    }
    .uni-select__selector-item {
      font-size: 20px;
      color: #767676;
    }
  }
}
</style>
